import styled from 'styled-components'

const DetailContainer = styled.div `
    width:100%;
    height: 2.5rem;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    img{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: 0;
        transform: translate(-50%, -50%);
        height: 100%;
        width:auto;
    }
    i{
        position:absolute;
        font-size:0.4rem;
        color:#fff;
        margin-left:0.1rem;
    }
    .sideName{
        position:absolute;
        background: #f73152;
        display: flex;
        flex-direction:row;
        border-radius: 0.12rem 0 0 0.12rem;
        padding: 0 0.04rem;
        align-items:center;
        height:0.28rem;
        right:0;
        bottom:0.3rem;
        i{
            position:relative;
            display:inline-block;
            font-size:0.15rem;
            margin-right:0.1rem;
            font-weight:600;
        }
        span{
            position:relative;
            display:inline-block;
            font-size:0.12rem;
            color:#fff;
            font-weight:600;
        }
    }
`

const DetailContextContainer = styled.div `
    padding:0.16rem;
    h1{
        font-size: 0.19rem;
        line-height: 0.3rem;
    }
    p{
        color: #797c80;
        font-size: 0.13rem;
        line-height: 0.22rem;
    }
    .bottom{
        display:flex;
        font-size: 0.12rem;
        line-height: 0.16rem;
        color: #aaaeb3;
        justify-content:space-between;
        padding: 0.16rem 0 0.19rem;
    }
`

const ListContainer = styled.div `
    ul{
        padding:0.16rem;       
        li{
            display:flex;
            flex-direction:column;
            margin-bottom:0.15rem;
            .top{
                display:flex;
                .left{
                    flex:1;
                    position:relative;
                    h1{
                    height: 0.48rem;
                    font-size: 0.16rem;
                    line-height: 0.24rem;
                    font-weight: 600;
                    color: #313233;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    }
                    p{
                        width:100%;
                        margin-bottom: 0.04rem;
                        font-size: 0.13rem;
                        font-weight: 400;
                        color: #7c7d80;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        position:absolute;
                        bottom:0.1rem;
                    }
                }
            }
                
                
                .right{
                    width:1.2rem;
                    height:1.06rem;
                    overflow: hidden;
                    position: relative;
                    img{
                        /* width:100%; */
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin-left: 0;
                        transform: translate(-50%, -50%);
                        height: 100%;
                        width:auto;
                    }
                }
            }
            .bot{
                display:flex;
                justify-content:space-between;
                font-weight: 400;
                color: #b2b5bf;
                font-size:0.1rem;
                margin-top:0.1rem;
                
                b{
                    font-weight: 400;
                    color: #b2b5bf;
                    font-size:0.1rem;
                }
                p{
                    span{
                        margin-right:0.2rem;
                    }
                }
            }
        }
    }
`

export {
    DetailContainer,
    DetailContextContainer,
    ListContainer
}